import Navbar from "../../compoents/Navbar";
import { Checkbox, Button, Result } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { useState, useEffect } from "react";
import style from "./index.module.css";
function Index() {
  const navigate = useNavigate();
  const location = useLocation();
  const { list } = location.state || {};

  const [selectedPayment, setSelectedPayment] = useState<string>("");

  const goMoney = ()=>{
    navigate("/Money",{state:{list}});
  }

  // 默认显示缴费确认页面
  return (
    <div className={style.container}>
      <Navbar showBack onBack={() => navigate(-1)} title="确认缴费" />
      <div className={style.content}>
        <div className={style.info}>
          <h3>缴费信息</h3>
          <div className={style.infoRow}>
            <span className={style.label}>就诊人</span>
            <span className={style.value}>王小柯</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>登记号</span>
            <span className={style.value}>{list?.[0]?.title}</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>就诊科室</span>
            <span className={style.value}>{list?.[0]?.keshi}</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>开单医生</span>
            <span className={style.value}>{list?.[0]?.doctor}</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>开单时间</span>
            <span className={style.value}>{list?.[0]?.time}</span>
          </div>
        </div>

        <div className={style.info}>
          <h3>订单信息</h3>
          <div className={style.infoRow}>
            <span className={style.label}>订单编号</span>
            <span className={style.value}>{list?.[0]?.title}</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>下单时间</span>
            <span className={style.value}>{list?.[0]?.time}</span>
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>支付金额</span>
            <span className={style.value}>{list?.[0]?.price}</span>
          </div>
        </div>

        <div className={style.info}>
          <h3>支付方式</h3>
          <div className={style.infoRow}>
            <span className={style.label}>自费支付</span>
            <Checkbox 
              checked={selectedPayment === "self"}
              onChange={() => setSelectedPayment("self")}
            />
          </div>
          <div className={style.infoRow}>
            <span className={style.label}>医保支付</span>
            <Checkbox 
              checked={selectedPayment === "insurance"}
              onChange={() => setSelectedPayment("insurance")}
            />
          </div>
        </div>
      </div>

      <Button onClick={()=>goMoney()} className={style.submitButton} block color="primary" size="large">
        确认缴费
      </Button>
    </div>
  );
}

export default Index;
